<template>
    <div class="details">
        <div class="theme">
            <el-input placeholder="输入文章标题..." v-model="articleTitle"></el-input>
            <el-input placeholder="文章类型..." v-model="articleType"></el-input>
            <el-button type="text" @click="saveToDraft">草稿箱</el-button>
            <el-button type="primary" @click="publishArticle">发布</el-button>
        </div>
        <Editor class="editos" :value="value" :plugins="plugins" :locale="zhHans" @change="handleChange"
            :uploadImages="uploadImage" />
        <button @click="saveMd">保存</button>
    </div>
</template>

<script>

import {
    Editor,
    //  Viewer 
} from '@bytemd/vue'
import breaks from '@bytemd/plugin-breaks'
import frontmatter from '@bytemd/plugin-frontmatter'
import gemoji from '@bytemd/plugin-gemoji'
import gfm from '@bytemd/plugin-gfm'
import highlight from '@bytemd/plugin-highlight'
import highlightssr from '@bytemd/plugin-highlight-ssr'
import mediumZoom from '@bytemd/plugin-medium-zoom'
import mermaid from '@bytemd/plugin-mermaid'
import footnotes from '@bytemd/plugin-footnotes'
import math from '@bytemd/plugin-math'
import zhHans from 'bytemd/lib/locales/zh_Hans.json'
import theme from "@/utils/bytemdPlugin/theme.js"
import align from "@/utils/bytemdPlugin/align.js"
import image from "@/utils/bytemdPlugin/image.js"
import highlight1 from "@/utils/bytemdPlugin/highlight.js"
import 'bytemd/dist/index.css'  // 导入编辑器样式
import 'highlight.js/styles/vs.css'
import 'juejin-markdown-themes/dist/juejin.min.css'
// import theme from "@/utils/bytemdPlugin/bytemd-plugin-theme.js"
// import { changeTheme, themeList } from "bytemd-plugin-theme"
import * as themeMap from "juejin-markdown-themes/dist"
import { postMd } from '@/api/md'
const plugins = [
    gfm(),
    highlight(),
    highlightssr(),
    breaks(),
    frontmatter(),
    footnotes(),
    gemoji(),
    mediumZoom(),
    mermaid(),
    math(),
    theme(),
    align(),
    highlight1(),
    image()
]

export default {
    name: 'editArticle',
    components: {
        Editor,
        // Viewer
    },
    data() {
        return {
            value: '',
            plugins,
            zhHans,
            themeMap,
            articleTitle: '',
            articleParticle: "",
            articleType: "",
        }
    },
    methods: {
        handleChange(v) {
            this.value = v
        },
        uploadImage() { },
        saveMd() {
            const params = {
                title: this.articleTitle,
                content: this.value,
                articleType: this.articleType
            }
            postMd(params)
        }
    },
    mounted() {
        // const themeList = Object.keys(this.themeMap).filter(key => key !== "default").map(key => ({
        //     title: key,
        //     style: "",
        //     rewrite: "",
        //     theme: key,
        //     highlight: themeMap[key]?.highlight,
        // }))
        // console.log(themeList, 9999999999);
        // console.log(this.themeMap);
    }
}
</script>